<template>
	<view>
		<up-navbar bgColor="#fff" :safeAreaInsetTop="true" :placeholder="true" fixed>
			<template #left>
				<up-image :show-loading="true" src="/static/logo.png" width="60rpx" height="60rpx"
					radius="10rpx"></up-image>
			</template>
			<template #center>
				<view style="width: 400rpx; transform: translateX(-50rpx)">
					<up-search inputAlign="left" height="25" :showAction="false"></up-search>
				</view>
			</template>
		</up-navbar>
		<base-wrapper :activeTabName="'index'">
			<view class="bg-color-white m-y-30">
				<up-swiper style="margin-top: 10px" :list="list2" keyName="image" showTitle :autoplay="true" circular
					height="150"></up-swiper>
			</view>
			<view class="grid-container bg-color-white p-20 m-y-30">
				<up-grid class="u-grid" :border="false" col="4">
					<up-grid-item>
						<view class="gird-icon bg-color-orange flex-center-center tn-shadow-blur">
							<up-icon size="30" color="#fff" name="order"></up-icon>
						</view>
						<text class="grid-text">林场概况</text>
					</up-grid-item>
					<up-grid-item>
						<view class="gird-icon bg-color-bluepurple flex-center-center tn-shadow-blur">
							<up-icon size="30" color="#fff" name="camera"></up-icon>
						</view>
						<text class="grid-text">环境监控</text>
					</up-grid-item>
					<up-grid-item>
						<view class="gird-icon bg-color-indigo flex-center-center tn-shadow-blur">
							<up-icon size="30" color="#fff" name="fingerprint"></up-icon>
						</view>
						<text class="grid-text">资源管理</text>
					</up-grid-item>
					<up-grid-item>
						<view class="gird-icon bg-color-purplered flex-center-center tn-shadow-blur">
							<up-icon size="30" color="#fff" name="server-man"></up-icon>
						</view>
						<text class="grid-text">林业服务</text>
					</up-grid-item>
				</up-grid>
			</view>
			<view class="workbench">
				<base-card-title>
					<template #title>
						<view>环保科普</view>
					</template>
				</base-card-title>
				<view class="m-t-10 m-b-50">
					<up-row justify="space-between" gutter="10" customStyle="margin-bottom: 20rpx">
						<up-col span="6">
							<view class="flex-start-center p-x-30 p-y-40 bg-color-blue--light b-rd-15">
								<view class="p-20 bg-color-indigo m-r-16 b-rd-10">
									<up-icon color="#fff" name="heart" :size="22"></up-icon>
								</view>
								<text class="text-color-aquablue--dark font-size-16">
									防火专栏
								</text>
							</view>
						</up-col>
						<up-col span="6">
							<view class="flex-start-center p-x-30 p-y-40 bg-color-blue--light b-rd-15">
								<view class="p-20 bg-color-indigo m-r-16 b-rd-10">
									<up-icon color="#fff" name="heart" :size="22"></up-icon>
								</view>
								<text class="text-color-aquablue--dark font-size-16">
									防火专栏
								</text>
							</view>
						</up-col>
					</up-row>
					<up-row justify="space-between" gutter="10">
						<up-col span="6">
							<view class="flex-start-center p-x-30 p-y-40 bg-color-blue--light b-rd-15">
								<view class="p-20 bg-color-indigo m-r-16 b-rd-10">
									<up-icon color="#fff" name="heart" :size="22"></up-icon>
								</view>
								<text class="text-color-aquablue--dark font-size-16">
									防火专栏
								</text>
							</view>
						</up-col>
						<up-col span="6">
							<view class="flex-start-center p-x-30 p-y-40 bg-color-blue--light b-rd-15">
								<view class="p-20 bg-color-indigo m-r-16 b-rd-10">
									<up-icon color="#fff" name="heart" :size="22"></up-icon>
								</view>
								<text class="text-color-aquablue--dark font-size-16">
									防火专栏
								</text>
							</view>
						</up-col>
					</up-row>
				</view>
			</view>
			<view class="contact w-full">
				<base-card-title>
					<template #title>
						<view>行业咨询</view>
					</template>
				</base-card-title>
				<view class="flex bg-color-white p-20 m-y-20 b-rd-6">
					<view class="flex-1 flex-c-around-start">
						<up-text bold color="#000" size="32rpx" lines="1" text="辽宁省林业大数据监控平台已完成测试阶段。"></up-text>
						<up-text color="#AAA" size="28rpx" lines="2" text="由大连东软信息学院林业创新团队研发，已部署在云平台。"></up-text>
						<view class="flex-r-between-center m-t-10">
							<up-tag text="标签" type="warning" shape="circle" size="mini"></up-tag>
						</view>
					</view>
					<up-image :show-loading="true"
						src="https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
						width="200rpx" height="200rpx" radius="10rpx"></up-image>
				</view>
				<view class="flex bg-color-white p-20 m-y-20 b-rd-6">
					<view class="flex-1 flex-c-around-start">
						<up-text bold color="#000" size="32rpx" lines="1" text="辽宁省林业大数据监控平台已完成测试阶段。"></up-text>
						<up-text color="#AAA" size="28rpx" lines="2" text="由大连东软信息学院林业创新团队研发，已部署在云平台。"></up-text>
						<view class="flex-r-between-center m-t-10">
							<up-tag text="标签" type="warning" shape="circle" size="mini"></up-tag>
						</view>
					</view>
					<up-image :show-loading="true"
						src="https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
						width="200rpx" height="200rpx" radius="10rpx"></up-image>
				</view>
				<view class="flex bg-color-white p-20 m-y-20 b-rd-6">
					<view class="flex-1 flex-c-around-start">
						<up-text bold color="#000" size="32rpx" lines="1" text="辽宁省林业大数据监控平台已完成测试阶段。"></up-text>
						<up-text color="#AAA" size="28rpx" lines="2" text="由大连东软信息学院林业创新团队研发，已部署在云平台。"></up-text>
						<view class="flex-r-between-center m-t-10">
							<up-tag text="标签" type="warning" shape="circle" size="mini"></up-tag>
						</view>
					</view>
					<up-image :show-loading="true"
						src="https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
						width="200rpx" height="200rpx" radius="10rpx"></up-image>
				</view>
				<view class="flex bg-color-white p-20 m-y-20 b-rd-6">
					<view class="flex-1 flex-c-around-start">
						<up-text bold color="#000" size="32rpx" lines="1" text="辽宁省林业大数据监控平台已完成测试阶段。"></up-text>
						<up-text color="#AAA" size="28rpx" lines="2" text="由大连东软信息学院林业创新团队研发，已部署在云平台。"></up-text>
						<view class="flex-r-between-center m-t-10">
							<up-tag text="标签" type="warning" shape="circle" size="mini"></up-tag>
						</view>
					</view>
					<up-image :show-loading="true"
						src="https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
						width="200rpx" height="200rpx" radius="10rpx"></up-image>
				</view>
				<view class="flex bg-color-white p-20 m-y-20 b-rd-6">
					<view class="flex-1 flex-c-around-start">
						<up-text bold color="#000" size="32rpx" lines="1" text="辽宁省林业大数据监控平台已完成测试阶段。"></up-text>
						<up-text color="#AAA" size="28rpx" lines="2" text="由大连东软信息学院林业创新团队研发，已部署在云平台。"></up-text>
						<view class="flex-r-between-center m-t-10">
							<up-tag text="标签" type="warning" shape="circle" size="mini"></up-tag>
						</view>
					</view>
					<up-image :show-loading="true"
						src="https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
						width="200rpx" height="200rpx" radius="10rpx"></up-image>
				</view>
			</view>
		</base-wrapper>
	</view>
</template>

<script setup>
	// 使用 reactive 创建响应式对象数组
	const list2 = reactive([{
			image: "https://cdn.uviewui.com/uview/swiper/swiper2.png",
			title: "昨夜星辰昨夜风，画楼西畔桂堂东",
		},
		{
			image: "https://cdn.uviewui.com/uview/swiper/swiper1.png",
			title: "身无彩凤双飞翼，心有灵犀一点通",
		},
		{
			image: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
			title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
		},
	]);
</script>

<style lang="scss">
	.grid-container {
		.gird-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			z-index: 1;
		}

		.tn-shadow-blur {
			position: relative;
		}

		.tn-shadow-blur::before {
			content: " ";
			display: block;
			background: inherit;
			-webkit-filter: blur(10rpx);
			filter: blur(10rpx);
			position: absolute;
			width: 100%;
			height: 100%;
			top: 10rpx;
			left: 10rpx;
			z-index: -1;
			opacity: 0.4;
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			border-radius: inherit;
			-webkit-transform: scale(1, 1);
			transform: scale(1, 1);
		}

		/* 阴影 end */

		.grid-text {
			font-size: 12px;
			color: #909399;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}
	}

	.contact {
		.title {}
	}
</style>